<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>教师信息管理系统</title>
  <script src="js/jquery-3.6.0.min.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    .search-box {
      margin-bottom: 20px;
      padding: 15px;
      background: #f5f5f5;
      border-radius: 5px;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 20px;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 10px;
      text-align: left;
    }
    th {
      background-color: #f2f2f2;
      font-weight: bold;
    }
    .pagination {
      display: flex;
      list-style: none;
      padding: 0;
      justify-content: center;
    }
    .pagination li {
      margin: 0 5px;
      cursor: pointer;
      padding: 5px 10px;
      border: 1px solid #ddd;
      border-radius: 3px;
    }
    .pagination li.active {
      background-color: #007bff;
      color: white;
      border-color: #007bff;
    }
    .action-buttons {
      display: flex;
      gap: 5px;
    }
    .action-buttons button {
      padding: 5px 10px;
      cursor: pointer;
      border: none;
      border-radius: 3px;
    }
    .action-buttons button.edit {
      background-color: #4CAF50;
      color: white;
    }
    .action-buttons button.delete {
      background-color: #f44336;
      color: white;
    }
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0,0,0,0.4);
    }
    .modal-content {
      background-color: #fefefe;
      margin: 10% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 50%;
      border-radius: 5px;
    }
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
    }
    .close {
      color: #aaa;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
    }
    .form-group {
      margin-bottom: 15px;
    }
    .form-group label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }
    .form-group input, .form-group select {
      width: 100%;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    .modal-footer {
      margin-top: 20px;
      text-align: right;
    }
    .modal-footer button {
      padding: 8px 15px;
      margin-left: 10px;
      cursor: pointer;
      border: none;
      border-radius: 3px;
    }
    .btn-primary {
      background-color: #007bff;
      color: white;
    }
    .btn-secondary {
      background-color: #6c757d;
      color: white;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="header">
    <h1>教师信息管理系统</h1>
    <button onclick="openAddModal()" style="padding: 8px 15px; background-color: #28a745; color: white; border: none; border-radius: 3px; cursor: pointer;">新增教师</button>
  </div>

  <div class="search-box">
    <div style="display: flex; gap: 15px;">
      <div style="flex: 1;">
        <label for="searchName">姓名:</label>
        <input type="text" id="searchName" placeholder="输入教师姓名">
      </div>
      <div style="flex: 1;">
        <label for="searchDepartment">所属系列:</label>
        <input type="text" id="searchDepartment" placeholder="输入所属系列">
      </div>
      <div style="align-self: flex-end;">
        <button id="searchBtn" style="padding: 8px 15px; background-color: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer;">搜索</button>
      </div>
    </div>
  </div>

  <table id="teacherTable">
    <thead>
    <tr>
      <th>教师编号</th>
      <th>姓名</th>
      <th>所属系列</th>
      <th>电子邮件</th>
      <th>联系电话</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <!-- 数据将通过AJAX动态加载 -->
    </tbody>
  </table>

  <div class="pagination-container">
    <ul class="pagination" id="pagination">
      <!-- 分页将通过AJAX动态生成 -->
    </ul>
  </div>
</div>

<!-- 新增教师模态框 -->
<div id="addModal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <h2>新增教师</h2>
      <span class="close" onclick="closeAddModal()">&times;</span>
    </div>
    <form id="addForm">
      <div class="form-group">
        <label for="addName">姓名:</label>
        <input type="text" id="addName" name="name" required>
      </div>
      <div class="form-group">
        <label for="addDepartment">所属系列:</label>
        <input type="text" id="addDepartment" name="department" required>
      </div>
      <div class="form-group">
        <label for="addEmail">电子邮件:</label>
        <input type="email" id="addEmail" name="email" required>
      </div>
      <div class="form-group">
        <label for="addPhone">联系电话:</label>
        <input type="tel" id="addPhone" name="phone" required>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn-secondary" onclick="closeAddModal()">取消</button>
        <button type="button" class="btn-primary" onclick="submitAddForm()">保存</button>
      </div>
    </form>
  </div>
</div>

<!-- 编辑教师模态框 -->
<div id="editModal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <h2>编辑教师信息</h2>
      <span class="close" onclick="closeEditModal()">&times;</span>
    </div>
    <form id="editForm">
      <input type="hidden" id="editTeacherNo" name="teacherNo">
      <div class="form-group">
        <label for="editName">姓名:</label>
        <input type="text" id="editName" name="name" required>
      </div>
      <div class="form-group">
        <label for="editDepartment">所属系列:</label>
        <input type="text" id="editDepartment" name="department" required>
      </div>
      <div class="form-group">
        <label for="editEmail">电子邮件:</label>
        <input type="email" id="editEmail" name="email" required>
      </div>
      <div class="form-group">
        <label for="editPhone">联系电话:</label>
        <input type="tel" id="editPhone" name="phone" required>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn-secondary" onclick="closeEditModal()">取消</button>
        <button type="button" class="btn-primary" onclick="submitEditForm()">保存</button>
      </div>
    </form>
  </div>
</div>

<script>
  let currentPage = 1;

  $(document).ready(function() {
    // 默认加载第一页数据
    loadTeacherData(1);

    // 搜索按钮点击事件
    $('#searchBtn').click(function() {
      loadTeacherData(1);
    });

    // 分页点击事件
    $(document).on('click', '.page-item', function() {
      const page = $(this).data('page');
      if (page) {
        loadTeacherData(page);
      }
    });
  });

  // 加载教师数据
  function loadTeacherData(page) {
    currentPage = page;
    const name = $('#searchName').val();
    const department = $('#searchDepartment').val();

    $.ajax({
      url: '/teacher/pageTeacher',
      type: 'GET',
      data: {
        current: page,
        size: 10,
        name: name,
        department: department
      },
      dataType: 'json',
      success: function(response) {
        renderTable(response.records);
        renderPagination(response.current, response.pages);
      },
      error: function(xhr, status, error) {
        console.error('加载数据失败:', error);
        alert('加载数据失败，请稍后重试');
      }
    });
  }

  // 渲染表格数据
  function renderTable(records) {
    const tbody = $('#teacherTable tbody');
    tbody.empty();

    if (records.length === 0) {
      tbody.append('<tr><td colspan="6" style="text-align:center;">暂无数据</td></tr>');
      return;
    }

    records.forEach(function(teacher) {
      const row = `
                <tr>
                    <td>${teacher.teacherNo}</td>
                    <td>${teacher.name}</td>
                    <td>${teacher.department}</td>
                    <td>${teacher.email || '-'}</td>
                    <td>${teacher.phone || '-'}</td>
                    <td>
                        <div class="action-buttons">
                            <button class="edit" onclick="openEditModal(${teacher.teacherNo}, '${teacher.name}', '${teacher.department}', '${teacher.email}', '${teacher.phone}')">修改</button>
                            <button class="delete" onclick="deleteTeacher(${teacher.teacherNo})">删除</button>
                        </div>
                    </td>
                </tr>
            `;
      tbody.append(row);
    });
  }

  // 渲染分页
  function renderPagination(currentPage, totalPages) {
    const pagination = $('#pagination');
    pagination.empty();

    if (totalPages <= 1) return;

    // 上一页按钮
    if (currentPage > 1) {
      pagination.append(`
                <li class="page-item" data-page="${currentPage - 1}">上一页</li>
            `);
    }

    // 页码按钮
    const startPage = Math.max(1, currentPage - 2);
    const endPage = Math.min(totalPages, currentPage + 2);

    if (startPage > 1) {
      pagination.append('<li class="page-item" data-page="1">1</li>');
      if (startPage > 2) {
        pagination.append('<li class="page-item disabled">...</li>');
      }
    }

    for (let i = startPage; i <= endPage; i++) {
      const activeClass = i === currentPage ? 'active' : '';
      pagination.append(`
                <li class="page-item ${activeClass}" data-page="${i}">${i}</li>
            `);
    }

    if (endPage < totalPages) {
      if (endPage < totalPages - 1) {
        pagination.append('<li class="page-item disabled">...</li>');
      }
      pagination.append(`<li class="page-item" data-page="${totalPages}">${totalPages}</li>`);
    }

    // 下一页按钮
    if (currentPage < totalPages) {
      pagination.append(`
                <li class="page-item" data-page="${currentPage + 1}">下一页</li>
            `);
    }
  }

  // 新增教师相关函数
  function openAddModal() {
    $('#addForm')[0].reset();
    $('#addModal').show();
  }

  function closeAddModal() {
    $('#addModal').hide();
  }

  function submitAddForm() {
    const teacher = {
      name: $('#addName').val(),
      department: $('#addDepartment').val(),
      email: $('#addEmail').val(),
      phone: $('#addPhone').val()
    };

    $.ajax({
      url: '/teacher/addTeacher',
      method: 'POST',
      contentType: 'application/json',
      data: JSON.stringify(teacher),
      success: function(response) {
        if (response.msg === 'success') {
          alert('新增成功');
          closeAddModal();
          loadTeacherData(currentPage);
        } else {
          alert('新增失败: ' + response.msg);
        }
      },
      error: function() {
        alert('新增失败，请检查网络或服务是否正常');
      }
    });
  }

  // 编辑教师相关函数
  function openEditModal(teacherNo, name, department, email, phone) {
    $('#editTeacherNo').val(teacherNo);
    $('#editName').val(name);
    $('#editDepartment').val(department);
    $('#editEmail').val(email || '');
    $('#editPhone').val(phone || '');
    $('#editModal').show();
  }

  function closeEditModal() {
    $('#editModal').hide();
  }

  function submitEditForm() {
    const teacher = {
      teacherNo: $('#editTeacherNo').val(),
      name: $('#editName').val(),
      department: $('#editDepartment').val(),
      email: $('#editEmail').val(),
      phone: $('#editPhone').val()
    };

    $.ajax({
      url: '/teacher/updateTeacher',
      method: 'PUT',
      contentType: 'application/json',
      data: JSON.stringify(teacher),
      success: function(response) {
        if (response.msg === 'success') {
          alert('修改成功');
          closeEditModal();
          loadTeacherData(currentPage);
        } else {
          alert('修改失败: ' + response.msg);
        }
      },
      error: function() {
        alert('修改失败，请检查网络或服务是否正常');
      }
    });
  }

  // 删除教师
  function deleteTeacher(teacherNo) {
    if (confirm('确定要删除该教师吗？')) {
      $.ajax({
        url: '/teacher/deleteTeacher',
        method: 'DELETE',
        data: {
          teacherNo: teacherNo
        },
        success: function(response) {
          if (response.msg === 'success') {
            alert('删除成功');
            loadTeacherData(currentPage);
          } else {
            alert('删除失败: ' + response.msg);
          }
        },
        error: function() {
          alert('删除失败，请检查网络或服务是否正常');
        }
      });
    }
  }
</script>
</body>
</html>